<template>
    <view class="page">
        <view class="cardsale-box">
            <view class="phone-box">手机号码：</view>
            <input class="input-phone" maxlength="11" @input="blurPhone" value="" placeholder="请输入顾客手机号码" placeholder-class="placeholder-style" type="text" />
            <button class="inquire" :disabled="isDisabled">查询</button>

            <view class="phone-hint" v-if="ishint">输入正确手机号</view>
            <view class="vip_btn" @tap="goToVipNew">
                <text>创建会员</text>
            </view>
        </view>
        <view class="cardsale-conter">
            <text class="info">没有查询到该手机号的任何信息</text>
            <image class="phone_bg" src="https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/phone_bg.png" mode="" />
            <view class="new_qrcode">
                <view class="new_qrcode_t">
                    <image src="https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/new_icon.png" mode="" />
                    <text>如果是新客户，可以扫码绑定微信</text>
                </view>
                <view class="qrcode_img"></view>
                <text class="wx">绑定微信的好处</text>
                <view class="box_msg">
                    <view class="t_1"><text>免费收到：</text></view>
                    <view>
                        <text class="t_2">新品 / 项目发布</text>
                        <text class="t_3">店内营销活动</text>
                    </view>
                    <view>
                        <text class="t_4">微信消费记录提醒</text>
                        <text class="t_5">欠款还款提醒</text>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
// pagesc/cardsale/index.js
export default {
    data() {
        return {
            phone: '',
            btn_text: '去开卡',
            type: 1,
            isDisabled: true,
            ajxtrue: false,
            ishint: false
        };
    },
    onLoad(o) {
        this.setData({
            type: o.type
        });
        console.log(o.type);

        if (o.type == 3) {
            this.setData({
                btn_text: '选择'
            });
        }
    },
    methods: {
        // 手机号验证
        blurPhone: function (e) {
            var phone = e.detail.value;
            console.log('a', phone);
            let that = this;

            if (!/^1[345678]\d{9}$/.test(phone)) {
                this.setData({
                    ajxtrue: false,
                    ishint: true,
                    phone: phone,
                    isDisabled: true
                });

                if (phone == '') {
                    this.setData({
                        ishint: false,
                        isDisabled: true
                    });
                }

                if (phone.length >= 11) {
                    this.setData({
                        ajxtrue: false,
                        ishint: true,
                        isDisabled: true
                    });
                }
            } else {
                this.setData({
                    ajxtrue: true,
                    ishint: false,
                    isDisabled: false
                });
            }
        },

        goToVipNew() {
            uni.navigateTo({
                url: '/pagesc/opencard/index?type=3'
            });
        }
    }
};
</script>
<style>
/* pagesc/cardsale/index.wxss */
.page {
    overflow-x: hidden;
}
.cardsale-box {
    background-image: url('https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/cardsale_banner.png');
    width: 100%;
    height: 330rpx;
    padding: 0rpx 20rpx;
    background-size: 100% 100%;
}

.phone-box {
    height: 100rpx;
    line-height: 120rpx;
    font-size: 26rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #ffffff;
}

.input-phone {
    width: 680rpx;
    height: 80rpx;
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0rpx 10rpx 20rpx 0rpx rgba(233, 74, 24, 0.2);
    border-radius: 40rpx;
    font-size: 30rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    display: flex;
    padding-left: 30rpx;
    align-items: center;
    justify-content: space-between;
}

.placeholder-style {
    color: #ffffff !important;
}

.inquire {
    text-align: center;
    width: 120rpx;
    height: 60rpx;
    line-height: 60rpx;
    background: #ffffff;
    box-shadow: 0rpx 6rpx 14rpx 0rpx rgba(233, 74, 24, 0.16);
    border-radius: 30rpx;
    font-size: 30rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #e94a18;
    margin-right: 10rpx;
}
.vip_btn {
    width: 240rpx;
    height: 60rpx;
    background: #ffffff;
    box-shadow: 0rpx 6rpx 14rpx 0rpx rgba(233, 74, 24, 0.16);
    border-radius: 30rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 39rpx auto 0 auto;
}
.vip_btn text {
    font-size: 30rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #e94a18;
}
.cardsale-conter {
    height: 1160rpx;
    background: #ffffff;
    border-radius: 20rpx 20rpx 0rpx 0rpx;
    margin-top: -20rpx;
    padding: 0rpx 20rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.info {
    font-size: 24rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #666666;
    margin-top: 42rpx;
}
.phone_bg {
    width: 293rpx;
    height: 216rpx;
    margin-top: 36rpx;
}
.new_qrcode {
    width: 670rpx;
    height: 680rpx;
    background: linear-gradient(180deg, #ffe3da 0%, rgba(255, 227, 218, 0) 100%);
    border-radius: 20rpx;
    margin-top: 79rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.new_qrcode_t {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}
.new_qrcode_t text {
    font-size: 30rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #e94a18;
    position: absolute;
    top: 30rpx;
    left: 58rpx;
    text-align: center;
}
.new_qrcode_t image {
    width: 565rpx;
    height: 6rpx;
    margin-top: 48rpx;
}
.qrcode_img {
    width: 280rpx;
    height: 280rpx;
    margin-top: 71rpx;
    background: #fff;
}
.wx {
    font-size: 30rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #333333;
    margin-top: 41rpx;
}
.box_msg {
    width: 630rpx;
    height: 180rpx;
    background: linear-gradient(-54deg, rgba(150, 115, 101, 0.1) 0%, rgba(233, 74, 24, 0.2) 0%);
    border-radius: 20rpx;
    margin-top: 40rpx;
}
.box_msg text {
    font-size: 28rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #e94a18;
    line-height: 40rpx;
}
.t_1 {
    margin-left: 62rpx;
    margin-top: 26rpx;
}
.t_2 {
    margin-left: 62rpx;
}
.t_3 {
    margin-left: 148rpx;
}
.t_4 {
    margin-left: 62rpx;
}
.t_5 {
    margin-left: 124rpx;
}
</style>
